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

const router = useRouter()
const route = useRoute()
const itemsPrescriptions = ref([]);
// const patientId = route.params.patient_id;
const appointmentId = route.params.appiontment_id;
const doctorName = ref('');
const prescription = computed(async () => {
    store.dispatch('updateIsLoading', true)
    await store.dispatch('getPatientAppointment')
    await getprescriptionList()
    doctorName.value = store.getters.getBookedAppointment.agent_name;
    store.dispatch('updateIsLoading', false)
});

const getprescriptionList = async () => {
    await store.dispatch('getPatientPrescriptionsByID', {
        appointment_id: appointmentId,
    })
    let prescriptions = store.getters.getPrescriptionList
    // itemsPrescriptions.value = store.getters.getPrescriptionList
    for (let data of prescriptions) {
        let dataObject = {}
        dataObject.brand = data.brand
        dataObject.direction_one = data.direction_one
        dataObject.direction_quantity = data.direction_quantity
        dataObject.direction_two = data.direction_two
        dataObject.date = formatDateDate(data.created_at)
        dataObject.dosage = data.dosage
        dataObject.from = data.from
        dataObject.name = data.name
        dataObject.quantity = data.quantity
        dataObject.refill_quantity = data.refill_quantity
        dataObject.status = data.status
        dataObject.comments = data.comments
        itemsPrescriptions.value.push(dataObject)
    }
    itemsPrescriptions.value.sort((a, b) => {
        return b.id - a.id;
    });
    console.log("itemsPrescriptions", itemsPrescriptions.value);

};
const formatDateDate = (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 getStatusColor = (status) => {
    switch (status) {
        case 'pending':
            return 'warning'; // Use Vuetify's warning color (typically yellow)
        case 'shipped':
            return '#45B8AC'; // Use Vuetify's primary color (typically blue)
        case 'delivered':
            return 'green';
        case 'returned':
            return 'red';
        case 'results':
            return 'blue';
        default:
            return 'grey'; // Use Vuetify's grey color for any other status
    }
};
</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>
    <template v-if="prescription">
        <VExpansionPanels variant="accordion">
            <VExpansionPanel v-for="(item, index) in itemsPrescriptions" :key="index">
                <div>

                    <VExpansionPanelTitle collapse-icon="mdi-chevron-down" expand-icon="mdi-chevron-right"
                        style="margin-left: 0px !important;">
                        <p class=""><b> {{ item.name }}</b>
                            <br />
                        <div class=" pt-2">#{{ appointmentId }} By {{ doctorName }}</div>
                        <div class=" pt-2">{{ item.date }}</div>
                        </p>


                        <v-row>

                        </v-row>

                        <span class="v-expansion-panel-title__icon badge text-warning"
                            v-if="item.status == null">Pending</span>
                        <span class="v-expansion-panel-title__icon badge" v-else>
                            <v-chip :color="getStatusColor(item.status)" label size="small" variant="text">
                                {{ item.status }}
                            </v-chip></span>
                    </VExpansionPanelTitle>
                    <VExpansionPanelText class="pt-0">

                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Brand:</b></p>
                            </v-col>
                            <v-col cols="12" md="4" sm="6">
                                <p>{{ item.brand }}</p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>From:</b></p>
                            </v-col>
                            <v-col cols="12" md="4" sm="6">
                                <p>{{ item.from }}</p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Dosage:</b></p>
                            </v-col>
                            <v-col cols="12" md="4" sm="6">
                                <p>{{ item.dosage }}</p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Quantity:</b></p>
                            </v-col>
                            <v-col cols="12" md="4" sm="6">
                                <p>{{ item.quantity }}</p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Direction Quantity:</b></p>
                            </v-col>
                            <v-col cols="12" md="8" sm="6">
                                <p>{{ item.direction_quantity }}</p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Direction One:</b></p>
                            </v-col>
                            <v-col cols="12" md="8" sm="6">
                                <p>{{ item.direction_one }} </p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Direction Two:</b></p>
                            </v-col>
                            <v-col cols="12" md="8" sm="6">
                                <p>{{ item.direction_two }} </p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Refill Quantity:</b></p>
                            </v-col>
                            <v-col cols="12" md="8" sm="6">
                                <p>{{ item.refill_quantity }}</p>
                            </v-col>

                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Status:</b></p>
                            </v-col>
                            <v-col cols="12" md="8" sm="6">
                                <p v-if="item.status == null" class="text-warning">Pending</p>
                                <p v-else>{{ item.status }}</p>
                            </v-col>
                        </v-row>
                        <v-row class='mt-1'>
                            <v-col cols="12" md="4" sm="6">
                                <p class='heading'><b>Comments:</b></p>
                            </v-col>
                            <v-col cols="12" md="8" sm="8">
                                <p>{{ item.comments }} </p>
                            </v-col>

                        </v-row>

                    </VExpansionPanelText>
                </div>


            </VExpansionPanel>
            <br />
        </VExpansionPanels>
    </template>
    <template v-else>
        <VCard>
            <VCard>
                <VAlert border="start" color="rgb(var(--v-theme-yellow))" variant="tonal">
                    <div class="text-center">No data found</div>
                </VAlert>

            </VCard>
        </VCard>

    </template>
</template>

<style lang="scss">
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;
}

span.v-expansion-panel-title__icon {
    margin-left: 0px !important;
}

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