<script setup>
import { defineProps } from 'vue';
const panel = ref(0)
const error = ref();
const isMark = ref();
const isShipped = ref(true);
const isShippedColor = ref('secondary');
const isDelivered = ref(true);
const isDeliveredColor = ref('secondary');
const isTransit = ref(true);
const isTransitColor = ref('secondary');
const isReceived = ref(true);
const isReceivedColor = ref('secondary');
const isResults = ref(true);
const isResultsColor = ref('secondary');
const props = defineProps({
    itemProps: {
        type: String,
        required: false,
    },
})

const isthis = computed(async () => {
    if (props.itemProps == 'shipped') {
        isShipped.value = false;
        isShippedColor.value = "rgb(var(--v-theme-yellow))";
    }
    if (props.itemProps == 'delivered') {
        isShipped.value = false;
        isShippedColor.value = "rgb(var(--v-theme-yellow))";
        isDelivered.value = false;
        isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
    }
    if (props.itemProps == 'transit') {
        isShipped.value = false;
        isShippedColor.value = "rgb(var(--v-theme-yellow))";
        isDelivered.value = false;
        isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
        isTransit.value = false;
        isTransitColor.value = "rgb(var(--v-theme-yellow))";
    }
    if (props.itemProps == 'received') {
        isShipped.value = false;
        isShippedColor.value = "rgb(var(--v-theme-yellow))";
        isDelivered.value = false;
        isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
        isTransit.value = false;
        isTransitColor.value = "rgb(var(--v-theme-yellow))";
        isReceived.value = false;
        isReceivedColor.value = "rgb(var(--v-theme-yellow))";
    }
    if (props.itemProps == 'result') {
        isShipped.value = false;
        isShippedColor.value = "rgb(var(--v-theme-yellow))";
        isResults.value = false;
        isResultsColor.value = "rgb(var(--v-theme-yellow))";
        isReceived.value = false;
        isReceivedColor.value = "rgb(var(--v-theme-yellow))";
        isTransit.value = false;
        isTransitColor.value = "rgb(var(--v-theme-yellow))";
        isDelivered.value = false;
        isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
    }


});

</script>



<template>
    <!-- <VCard class="text-center text-sm-start"> -->
    <VRow no-gutters v-if="isthis">
        <VCol>
            <VExpansionPanels v-model="panel">
                <VExpansionPanel>
                    <VExpansionPanelTitle variant="tonal">
                        <span class="font-color"><b>Lab Kit </b> <br><br>
                            <p> Status:{{ props.itemProps }}
                            </p>
                            <p>Test Kit Tracking : To you </p>
                        </span>
                    </VExpansionPanelTitle>
                    <VExpansionPanelText>
                        <h2 class="text-start">Results</h2>
                        <VCardText>

                            <VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
                                <!-- SECTION Timeline Item: Flight -->

                                <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="error" icon="tabler-check"
                                    size="small">

                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center gap-2 flex-wrap">

                                        <span class="app-timeline-title">
                                            <b>Ordered Hormone Test Kit</b><br><br>
                                        </span>
                                    </div>
                                </VTimelineItem>

                                <!-- !SECTION -->
                                <VTimelineItem :dot-color="isShippedColor" :color="isShippedColor" icon="tabler-check"
                                    size="small">
                                    <template #icon v-if="isShipped">
                                        2
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div class="app-timeline-title">
                                            <b>Shipped Hormone Test Kit</b>
                                        </div>
                                    </div>
                                </VTimelineItem>

                                <!-- SECTION Timeline Item: Interview Schedule -->
                                <VTimelineItem :dot-color="isDeliveredColor" :color="isDeliveredColor"
                                    icon="tabler-check" size="small">
                                    <template #icon v-if="isDelivered">
                                        3
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div>
                                            <b>Delivered Hormone Test Kit</b>
                                        </div>
                                    </div>
                                </VTimelineItem>

                                <VTimelineItem :dot-color="isTransitColor" :color="isTransitColor" icon="tabler-check"
                                    size="small">
                                    <template #icon v-if="isTransit">
                                        4
                                    </template>
                                    <!-- <template #icon>
                      <VIcon size="20" icon="tabler-circle-check" color="error" />
                    </template> -->
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1 ">
                                        <div>
                                            <b>Hormone Test Kit in Transit</b>
                                        </div>
                                    </div>
                                </VTimelineItem>
                                <VTimelineItem :dot-color="isReceivedColor" :color="isReceivedColor" icon="tabler-check"
                                    size="small">
                                    <template #icon v-if="isReceived">
                                        5
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div>
                                            <b>Lab Received Hormone Test Kit</b>
                                        </div>
                                    </div>
                                </VTimelineItem>
                                <VTimelineItem :dot-color="isResultsColor" :color="isResultsColor" icon="tabler-check"
                                    size="small">
                                    <template #icon v-if="isResults">
                                        6
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div>
                                            <b>Provider Reviewed Test Results</b>
                                        </div>
                                    </div>
                                </VTimelineItem>
                                <!-- !SECTION -->
                            </VTimeline>
                        </VCardText>
                    </VExpansionPanelText>
                </VExpansionPanel>

            </VExpansionPanels>
        </VCol>
    </VRow>
    <!-- </VCard> -->
</template>

<style lang="scss" scoped>
.v-timeline .v-timeline-divider__inner-dot {
    background-color: white !important;
}

.font-color {
    color: #fff;
}

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

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: #fff
}

.v-expansion-panel {
    background-color: #fff;
    border-radius: 16px;
    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;
}
</style>
