<script setup>
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();
const router = useRouter()
const route = useRoute()
const itemsPrescriptions = ref([]);
const patientId = route.params.patient_id;
const props = defineProps({
  prescriptionData: {
    type: Object,
    required: true,
  },
})
const prescription = computed(async () => {
    console.log('computed=====')
    await getprescriptionList()
   
});
const doctorName = ref('');
const currentPage = ref(1);
const itemsPerPage = ref(2);
const paginatedItems = computed(() => {
   const start = (currentPage.value - 1) * itemsPerPage.value;
    const end = start + itemsPerPage.value;
     let prescriptions = props.prescriptionData.prescriptions;
    prescriptions.sort((a, b) => {
        return b.order_id - a.order_id;
    });
  console.log('props.orderData',props.prescriptionData.prescriptions)
    itemsPrescriptions.value = prescriptions
    return itemsPrescriptions.value.slice(start, end);
});

const totalPages = computed(() => {
    return Math.ceil(itemsPrescriptions.value.length / itemsPerPage.value);
});

const changePage = (page) => {
    currentPage.value = page;
}
const formatTime = (dateString) => {
    return new Date(dateString).toLocaleTimeString('en-US', {
        hour: 'numeric',
        minute: 'numeric'
    })
}
const getprescriptionList = async () => {
 
    let prescriptions = props.prescriptionData.prescriptions
    console.log("BeforeOverviewItem", prescriptions);
    // itemsPrescriptions.value = store.getters.getPrescriptionList
    for (let data of prescriptions) {
      let dataObject = {}
         dataObject.name = data.name
          dataObject.brand = data.brand
          dataObject.from = data.from
          dataObject.direction_quantity = data.direction_quantity
          dataObject.dosage = data.dosage
          dataObject.quantity = data.quantity
          dataObject.refill_quantity = data.refill_quantity
          dataObject.actions = ''
          dataObject.id = data.id
          dataObject.comments = data.comments
          dataObject.direction_one = data.direction_one
          dataObject.direction_two= data.direction_two
          dataObject.status = data.status
          dataObject.provider_name = data.provider_name
          dataObject.order_id = data.order_id
        dataObject.date = formatDateDate(data.created_at)
        
        itemsPrescriptions.value.push(dataObject)
    }
    console.log(itemsPrescriptions.value)
    itemsPrescriptions.value.sort((a, b) => {
        return b.order_id - a.order_id;
    });
    console.log("OverviewItem", 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 'success';
        case 'returned':
            return 'red';
        case 'results':
            return 'blue';
        default:
            return 'grey'; // Use Vuetify's grey color for any other status
    }
};
const resolveStatusVariant = status => {
  if (status === 1)
    return {
      color: 'primary',
      text: 'Current',
    }
  else if (status === 2)
    return {
      color: 'success',
      text: 'Professional',
    }
  else if (status === 3)
    return {
      color: 'error',
      text: 'Rejected',
    }
  else if (status === 4)
    return {
      color: 'warning',
      text: 'Resigned',
    }
  else
    return {
      color: 'info',
      text: 'Applied',
    }
}
const headers = [

 {
    title: 'Order Id',
    key: 'order_id',
  },
  {
    title: 'Provider Name',
    key: 'provider_name',
  },
  {
    title: 'Date',
    key: 'date',
  },
  {
    title: 'Status',
    key: 'status',
  },
]
const prescriptionIndex = ref([]);
const prescriptionItem = ref(-1)
const prescriptionDialog = ref(false)
const selectedItem = ref(null);
const showDetail = item => {
    // console.log("id",item);
  prescriptionIndex.value = item
  selectedItem.value = item;
//   console.log("index",prescriptionIndex.value);
//   prescriptionItem.value = { ...item }
  prescriptionDialog.value = true
}
const close = () => {
  prescriptionDialog.value = false
  prescriptionIndex.value = -1
  prescriptionItem.value = { ...defaultItem.value }
}
onMounted(async () => {
  let prescriptions = props.prescriptionData.prescriptions;
    prescriptions.sort((a, b) => {
        return b.order_id - a.order_id;
    });
  console.log('props.orderData', props.prescriptionData.prescriptions)
    itemsPrescriptions.value = prescriptions
});
</script>
<template>
   <template v-if="itemsPrescriptions.length > 0">
        <v-row>
            <v-col v-for="prescription in paginatedItems" :key="prescription.id" cols="12" md="6">
          
                <v-card class="mx-auto mb-4" elevation="4" hover>
                    <v-img height="200" src="https://cdn.pixabay.com/photo/2016/11/23/15/03/medication-1853400_1280.jpg"
                        class="white--text align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
                        <v-card-title class="text-h5" style="color: #fff;">{{ prescription.prescription_name
                            }}</v-card-title>
                    </v-img>

                    <v-card-text>



                        <v-chip :color="getStatusColor(prescription.status)" text-color="white" small class="mr-2">
                            {{ prescription.status }}
                        </v-chip>
                       Order ID : <RouterLink :to="{ name: 'admin-order-detail', params: { id: prescription.order_id } }">
                               <span class=""> #{{ prescription.order_id }} &nbsp;</span>
                                </RouterLink>
                             
                    </v-card-text>

                    <v-divider class="mx-4"></v-divider>

                    <v-card-text>
                        <v-row dense>
                            <v-col cols="6">
                                <v-icon small color="primary">ri-capsule-line</v-icon>
                                <span class="ml-1">Dosage:{{ prescription.dosage }}</span>
                            </v-col>
                            <v-col cols="6">
                                <v-icon small color="primary">ri-medicine-bottle-line</v-icon>
                                <span class="ml-1">Quantity:{{ prescription.quantity }}</span>
                            </v-col>
                            <v-col cols="6">
                                <v-icon small color="primary">ri-calendar-line</v-icon>
                                <span class="ml-1">{{ formatDate(prescription.created_at) }}</span>
                            </v-col>
                            <v-col cols="6">
                                <v-icon small color="primary">ri-time-line</v-icon>
                                <span class="ml-1">{{ formatTime(prescription.created_at) }}</span>
                            </v-col>
                        </v-row>
                    </v-card-text>

                    <v-card-actions>
                        <v-btn color="primary" text>
                            More Details
                        </v-btn>
                        <v-spacer></v-spacer>
                        <v-btn @click="prescription.show = !prescription.show">
                        {{ prescription.show ? '' : '' }}
                        <v-icon right color="primary">
                          {{ prescription.show ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line' }}
                        </v-icon>
                      </v-btn>
                    </v-card-actions>

                    <v-expand-transition>
                        <div v-show="prescription.show">
                            <v-divider></v-divider>
                            <v-card-text>
                                <v-row dense>
                                    <v-col cols="12">
                                        <strong>Add By:</strong> {{ prescription.created_by}}
                                    </v-col>
                                    <v-col cols="12">
                                        <strong>Brand:</strong> {{ prescription.brand }}
                                    </v-col>
                                    <v-col cols="12">
                                        <strong>From:</strong> {{ prescription.from }}
                                    </v-col>
                                    <v-col cols="12">
                                        <strong>Direction One:</strong> {{ prescription.direction_one }}
                                    </v-col>
                                    <v-col cols="12">
                                        <strong>Direction Two:</strong> {{ prescription.direction_two }}
                                    </v-col>
                                    <v-col cols="12">
                                        <strong>Refill Quantity:</strong> {{ prescription.refill_quantity }}
                                    </v-col>
                                    <v-col cols="12">
                                        <strong>Direction Quantity:</strong> {{ prescription.direction_quantity }}
                                    </v-col>
                                    <v-col cols="12" v-if="prescription.comments">
                                        <strong>Comments:</strong> {{ prescription.comments }}
                                    </v-col>
                                </v-row>
                            </v-card-text>
                        </div>
                    </v-expand-transition>
                </v-card>
            </v-col>
        </v-row>
     
            <v-col cols="auto">
              <v-pagination v-model="currentPage" :length="totalPages" @input="changePage"></v-pagination>
            </v-col>
         
      
    </template>
     <!-- <v-row>
   <v-col cols="12" md="12" v-if="itemsPrescriptions">
      <v-card title="Prescriptions" v-if="prescription">
      <VCardText >
          
        </VCardText>
      <VDataTable
        :headers="headers"
        :items="itemsPrescriptions"
        :items-per-page="5"
        class="text-no-wrap"
      >
            <template #item.provider_name="{ item }">
           <span class="">{{ item.provider_name }}</span>
        </template>
        <template #item.order_id="{ item }">
            <RouterLink :to="{ name: 'admin-order-detail', params: { id: item.order_id } }">
                               <span class=""> #{{ item.order_id }} &nbsp;</span>
                                </RouterLink>
        </template>
        
        <template #item.status="{ item }">
        
          <VChip
            :color="getStatusColor(item.status)"
            density="comfortable"
          >
            {{ item.status}}
          </VChip>
        </template>

        <template #item.name="{ item }">
        <router-link
                  :to="{ name: 'admin-patient-profile', params: { id: item.id } }"
                  class="text-high-emphasis  "
                  @click.prevent=showDetail(item)
                >
                {{ item.name }} 
                </router-link>
       
        </template>
      </VDataTable>
      </v-card>
    </v-col> 
  </v-row>-->
    <VDialog
    v-model="prescriptionDialog"
    max-width="600px"
  >
    <VCard :title=prescriptionIndex.name>
    <DialogCloseBtn
        variant="text"
        size="default"
        @click="[prescriptionDialog = false,selectedItem = '']"
      />
      <VCardText>
            <v-row class='mt-0'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Brand:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.brand }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>From:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.from }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Dosage:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.dosage }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Quantity:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.quantity }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Direction Quantity:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.direction_quantity }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Direction One:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.direction_one }} </p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Direction Two:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.direction_two }} </p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Refill Quantity:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.refill_quantity }}</p>
                        </v-col>

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

                    </v-row>
                    
      </VCardText>
    </VCard>
    
  </VDialog>
</template>

<style lang="scss">
button.v-expansion-panel-title {
  background-color: #003152 !important;
  color: #fff;
}

button.v-expansion-panel-title.bg-secondary {
  background-color: #003152 !important;
  color: #fff;
}

button.v-expansion-panel-title {
  background-color: #003152 !important;
  color: #fff;
}

span.v-expansion-panel-title__icon {
  color: #fff
}
.v-pagination .v-btn {
    transition: none !important;
}
.v-pagination .v-btn:focus {
    outline: none;
}
// button.v-expansion-panel-title.bg-secondary {
//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
// }

// button.v-expansion-panel-title {
//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
// }

// button.v-expansion-panel-title.v-expansion-panel-title--active {
//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
// }

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

.details {
  position: relative;
  box-sizing: content-box;
  border: 2px solid #fff;
  border-radius: 1em;
  background-color: #696cff;
  block-size: 0.85em;
  box-shadow: 0 0 3px rgba(67, 89, 113, 80%);
  color: #fff;
  content: "+";
  font-family: "Courier New", Courier, monospace;
  font-weight: 500;
  inline-size: 0.85em;
  inset-block-start: 50%;
  inset-block-start: 0.7em;
  inset-inline-start: 50%;
  line-height: 0.9em;
  text-align: center;
  transform: translate(-50%, -50%);
}
</style>
