<script setup>
import avatar1 from "@images/avatars/avatar-1.png";
import moment from 'moment-timezone';
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
const route = useRoute();
const isConfirmDialogVisible = ref(false);
const isUserInfoEditDialogVisible = ref(false);
const isEditAddressDialogVisible = ref(false);
// const scheduleDate = ref('');
// const scheduleTime = ref('');
const patientId = route.params.patient_id;
const appointmentId = route.params.id;
const headers = [
    {
        title: "Product",
        key: "title",
    },
    {
        title: "Price",
        key: "price",
    },
    {
        title: "Quantity",
        key: "quantity",
    },
    {
        title: "status",
        key: "status",
    },
    {
        title: "Total",
        key: "total",
        sortable: false,
    },
];
const store = useStore();
const orderData = ref(null);
const pateintDetail = ref({});
const productItems = ref([]);
const appointmentData = ref([]);
const orderId = ref();
const orderDetail = ref();
const scheduleDate = ref();
const scheduleTime = ref();
const telemed_pro = ref();
const subTotalAmount = ref();
const filteredOrders = computed(() => {
    let filtered = store.getters.getSinglePatientAppointment;
    // filtered.order_items.forEach(product => {
    //     const price = parseFloat(product.total_price);
    //     const shippingPrice = parseFloat(product.shipping_cost);
    //     totalShipping.value += price * shippingPrice;
    //     totalAmount.value += product.qty * price;
    // });


    return filtered;
});


const formatDateActviy1 = (date) => {
    const messageDate = new Date(date);
    const dayFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long' });
    const timeFormatter = new Intl.DateTimeFormat('en-US', {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true
    });
    return `${dayFormatter.format(messageDate)} ${timeFormatter.format(messageDate)}`;
};
const formatDateActviy = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
};
const formatDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: "numeric",
        month: "numeric",
        day: "numeric",
        hour: "numeric",
        minute: "2-digit",

        hour12: false,
    };
    const formattedDate = messageDate
        .toLocaleString("en-US", options)
        .replace(/\//g, "-");
    return `${formattedDate}`;
};
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 [datePart, timePart] = dateFormat.split(" "); // Split date and time parts
        const [year, month, day] = datePart.split("-"); // Split date into year, month, and day
        const formattedMonth = parseInt(month).toString(); // Convert month to integer and then string to remove leading zeros
        const formattedDay = parseInt(day).toString(); // Convert day to integer and then string to remove leading zeros
        const formattedDate = `${formattedMonth}-${formattedDay}-${year}`; // Format date as mm-dd-yyyy
        return `${formattedDate} ${timePart}`; // Combine formatted date with original time part
    }
}


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
}
onMounted(async () => {
    store.dispatch("updateIsLoading", true);
    // await store.dispatch("orderDetailPatient", {
    //     id: route.params.id,
    // });
    // orderData.value = store.getters.getPatientOrderDetail;
    // console.log(orderData.value);

    await store.dispatch('getAppointmentByIdAgent', {
        patient_id: patientId,
        appointment_id: appointmentId,
    })

    orderData.value = store.getters.getSinglePatientAppointment;
    orderDetail.value = store.getters.getSinglePatientAppointment.order;
    console.log("appointmentData", orderData.value);
    orderId.value = orderData.value.order.id;
    let appointmentDate = convertUtcDateTimeToLocal(orderData.value.appointment_date, orderData.value.appointment_time, 'date')
    let appointmentTime = convertUtcDateTimeToLocal(orderData.value.appointment_date, orderData.value.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");

});
const getStatusColor = (status) => {
    switch (status) {
        case "pending":
            return "orange";
        case "Shipped":
            return "blue";
        case "Delivered":
            return "green";
        case "Cancelled":
            return "red";
        default:
            return "gray";
    }
};
</script>
<template>
    <VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>
    <div>
        <div class="d-flex justify-space-between align-center flex-wrap gap-y-4 mb-6">
            <div>
                <div class="d-flex gap-2 align-center mb-2 flex-wrap">
                    <h5 class="text-h5">Order #{{ orderId }}</h5>
                    <div class="d-flex gap-x-2">

                        <!-- <VChip variant="tonal" color="success" size="small">
                            Paid
                        </VChip>
                        <VChip variant="tonal" color="info" size="small">
                            Ready to Pickup
                        </VChip> -->
                    </div>
                </div>
                <div>
                    <span class="text-body-1"> </span>
                </div>
            </div>
        </div>

        <VRow v-if="filteredOrders">
            <VCol cols="12" md="8">
                <!-- 👉 Order Details -->
                <VCard class="mb-6">
                    <VCardItem>
                        <template #title>
                            <h5>Order Details</h5>

                        </template>
                    </VCardItem>
                    <div class="table-container">
                        <VDataTable :headers="headers" :items="filteredOrders.order_items" item-value="id"
                            class="text-no-wrap ">
                            <template #item.title="{ item }">
                                <div class="d-flex gap-x-3">
                                    <!-- <VAvatar size="34" variant="tonal" :image="item.image_url" rounded /> -->

                                    <div class="d-flex flex-column align-center">
                                        <h6 style="margin-bottom: 0px;">
                                            {{ item.plans_v1.title }}
                                        </h6>

                                        <span class="text-sm text-start align-self-start">
                                            {{ item.plans_v1.list_two_title }}
                                        </span>
                                    </div>
                                </div>
                            </template>

                            <template #item.price="{ item }">
                                <span>${{ item.plans_v1.price }}</span>
                            </template>
                            <template #item.status="{ item }">
                                <span>
                                    <VChip variant="tonal" :color="getStatusColor(item.status)" size="small">
                                        {{ item.status }}
                                    </VChip>
                                </span>
                            </template>
                            <template #item.total="{ item }">
                                <span> ${{ item.plans_v1.price * item.plans_v1.qty }} </span>
                            </template>

                            <template #bottom />
                        </VDataTable>
                    </div>
                    <VDivider />
                    <VCardText>
                        <div class="d-flex align-end flex-column">
                            <table class="text-high-emphasis">
                                <tbody>
                                    <tr>
                                        <td width="200px">Subtotal:</td>
                                        <td class="font-weight-medium">
                                            ${{
        parseFloat(
            filteredOrders.order
                .order_total_amount
        ).toFixed(2)
    }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Shipping fee:</td>
                                        <td class="font-weight-medium">
                                            ${{ parseFloat(filteredOrders.order.order_total_shipping).toFixed(2)
                                            }}
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="font-weight-medium">
                                            Total:
                                        </td>
                                        <td class="font-weight-medium">
                                            ${{
        parseFloat(
            filteredOrders.order
                .order_total_amount + filteredOrders.order.order_total_shipping
        ).toFixed(2)
    }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </VCardText>
                </VCard>

                <!-- 👉 Shipping Activity -->
                <VCard title="Shipping Activity">
                    <VCardText>
                        <VTimeline truncate-line="both" align="start" side="end" line-inset="10" line-color="primary"
                            density="compact" class="v-timeline-density-compact">
                            <VTimelineItem dot-color="primary" size="x-small"
                                v-for="item in filteredOrders.shipping_activity" :key="item.id">
                                <div class="d-flex justify-space-between align-center mb-3">
                                    <span class="app-timeline-title"> {{ item.note }}</span>
                                    <span class="app-timeline-meta">{{ formatDateActviy(item.created_at) }}</span>
                                </div>
                                <p class="app-timeline-text mb-0">
                                    {{ item.short_description }}
                                </p>
                            </VTimelineItem>


                        </VTimeline>
                    </VCardText>
                </VCard>
            </VCol>
            <VCol cols="12" md="4">
                <VCard class="mb-6">
                    <VCardText>
                        <div class="d-flex align-center justify-space-between gap-1 mb-6">
                            <div class="text-body-1 text-high-emphasis font-weight-medium">
                                <v-icon class="mr-2" color="rgb(var(--v-theme-yellow))">mdi-calendar-clock</v-icon>
                                Appointment Details
                            </div>
                        </div>
                        <div class="appointment-details">
                            <div class="detail-item">
                                <span class="detail-label">Appointment At:</span>
                                <span class="detail-value">{{ scheduleDate + ' ' + scheduleTime }}</span>
                            </div>
                            <div class="detail-item" v-if="filteredOrders.start_time && filteredOrders.end_time">
                                <span class="detail-label">Start Time:</span>
                                <span class="detail-value">{{
        formatDate(filteredOrders.start_time)
    }}</span>
                            </div>
                            <div class="detail-item" v-if="filteredOrders.start_time && filteredOrders.end_time">
                                <span class="detail-label">End Time:</span>
                                <span class="detail-value">{{
        formatDate(filteredOrders.end_time)
    }}</span>
                            </div>
                            <div class="detail-item" v-if="filteredOrders.start_time && filteredOrders.end_time">
                                <span class="detail-label">Duration:</span>
                                <span class="detail-value">{{
        totalCallDuration(filteredOrders.start_time,
            filteredOrders.end_time) }}</span>
                            </div>
                        </div>
                    </VCardText>
                </VCard>
                <!-- 👉 Customer Details  -->
                <VCard class="mb-6" v-if="filteredOrders.telemed_pro.name">
                    <VCardText class="d-flex flex-column gap-y-6">
                        <h3>Provider Details</h3>

                        <div class="d-flex align-center">
                            <VAvatar :image="avatar1" class="me-3" style="display: none;" />
                            <VAvatar color="primary" class="me-3" size="30">
                                <VIcon icon="mdi-account" size="25" color="white" />
                            </VAvatar>
                            <div>
                                <div class="text-body-1 text-high-emphasis font-weight-medium">
                                    {{ filteredOrders.telemed_pro.name }}

                                </div>

                            </div>
                        </div>

                        <div class="d-flex align-center" style="display: none;">
                            <VAvatar variant="tonal" color="success" class="me-3" style="display: none;">
                                <VIcon icon="ri-shopping-cart-line" />
                            </VAvatar>

                            <!-- <h4 style="display: none;">
                                {{ filteredOrders.order_items.total_products }}
                                Products
                            </h4> -->
                        </div>

                        <div class="d-flex flex-column gap-y-1">
                            <div class="d-flex justify-space-between gap-1 text-body-2">
                                <h5>Contact Info</h5>
                            </div>
                            <span>Email:
                                {{ filteredOrders.telemed_pro.email }}</span>
                            <span>Mobile:
                                {{ filteredOrders.telemed_pro.phone_number }}</span>
                        </div>
                    </VCardText>
                </VCard>
                <VCard class="mb-6">
                    <VCardText>
                        <div class="d-flex align-center justify-space-between gap-1 mb-6">
                            <div class="text-body-1 text-high-emphasis font-weight-medium">
                                <v-icon class="mr-2" color="rgb(var(--v-theme-yellow))">mdi-truck-delivery</v-icon>
                                Shipping Address
                            </div>
                            <!-- <span
                                class="text-base text-primary font-weight-medium cursor-pointer"
                                @click="
                                    isEditAddressDialogVisible =
                                        !isEditAddressDialogVisible
                                "
                                >Edit</span
                            > -->
                        </div>
                        <div>
                            {{ filteredOrders.order.shipping_address1 }}
                            <br />
                            {{ filteredOrders.order.shipping_city }}
                            <br />
                            {{ filteredOrders.order.shipping_state }},
                            {{ filteredOrders.order.shipping_zipcode }}
                            <br />
                            {{ filteredOrders.order.shipping_country }}
                        </div>
                    </VCardText>
                </VCard>

                <!-- 👉 Billing Address -->
                <VCard style="display: none;">
                    <VCardText>
                        <div class="d-flex align-center justify-space-between gap-1 mb-3">
                            <div class="text-body-1 text-high-emphasis font-weight-medium">
                                Billing Address
                            </div>
                            <!-- <span
                                class="text-base text-primary font-weight-medium cursor-pointer"
                                @click="
                                    isEditAddressDialogVisible =
                                        !isEditAddressDialogVisible
                                "
                                >Edit</span
                            > -->
                        </div>
                        <div>
                            {{ filteredOrders.order.billing_address1 }}
                            <br />
                            {{ filteredOrders.order.billing_city }}
                            <br />
                            {{ filteredOrders.order.billing_state }},
                            {{ filteredOrders.order.billing_zipcode }}
                            <br />
                            {{ filteredOrders.order.billing_country }}
                        </div>

                        <!-- <div class="mt-6">
                            <h6 class="text-h6 mb-1">Mastercard</h6>
                            <div class="text-base">Card Number: ******4291</div>
                        </div> -->
                    </VCardText>
                </VCard>

            </VCol>


        </VRow>
    </div>

</template>
<style scoped>
.appointment-details {
    display: flex;
    flex-direction: column;
}

.detail-item {
    display: flex;
    margin-bottom: 10px;
}

.detail-label {
    font-weight: bold;
    min-width: 120px;
}

.detail-value {
    flex: 1;
}

::-webkit-scrollbar {
    width: 10px;
    /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Color of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    /* Color of the handle */
    border-radius: 5px;
    /* Roundness of the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Color of the handle on hover */
}
</style>
