<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 appointmentId = route.params.id;
const prescription = computed(async () => {
    // console.log('computed=====')
    await getprescriptionList()
    // await store.dispatch('getHistoryPrescription')
    // notes.value = store.getters.getHistoryPrescription;
    // console.log("getHistoryPrescription", notes.value);
    // store.dispatch('updateIsLoading', false)
});

const getprescriptionList = async () => {
    await store.dispatch('getPrescriptions', {
        patient_id: patientId,
        appointment_id: appointmentId,
    })
    let prescriptions = store.getters.getPrescriptionList
    // console.log("BeforeOverviewItem", prescriptions);
    // 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.date)
        dataObject.dosage = data.dosage
        dataObject.from = data.from
        dataObject.name = data.name
        dataObject.quantity = data.quantity
        dataObject.id = data.id
        dataObject.doctor = data.doctor.name
        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("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: '',
    key: 'id',
    sortable: false,
  },
  {
    title: 'Name',
    key: 'name',
  },
  {
    title: 'Date',
    key: 'date',
  },
  {
    title: 'Status',
    key: 'status',
  },
]
const prescriptionIndex = ref([]);
const prescriptionItem = ref(-1)
const prescriptionDialog = ref(false)
const getSelectedCart = ref('');
const getIsTonalSnackbarVisible = ref(false);
const prescriptionStatus = ref('');
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 }
}
const breadcrums = [
    {
        title: 'Meeting',
        disabled: false,
        to: '/admin/patient/meetings/'+patientId,
    },
    {
        title: 'Prescription',
        disabled: false,
    }
    
];

const onChange = (id)=> {
  getSelectedCart.value = id;
  
}
const onStatusChange = async(status) => {
  console.log('Selected status:', status, getSelectedCart.value);
   store.dispatch('updateIsLoading', true)
   await store.dispatch('updatePrescriptionStatus', {
      prescription_id : getSelectedCart.value,
      status: status
  })
  console.log('Selected:', store.getters.getPatientPrescriptionStatus);
  prescriptionStatus.value =   store.getters.getPatientPrescriptionStatus.status;
  getIsTonalSnackbarVisible.value = true;
};

</script>
<template>
    <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
        <template v-slot:divider style=" padding-block:0 0">
            >
        </template>
    </v-breadcrumbs>
    <VSnackbar class="pl-0"  v-model="getIsTonalSnackbarVisible" :timeout="50000" location="top end" variant="flat"
              color="success">
              <VIcon
                    class="ri-success-line success-icon pl-0"
                  /> {{prescriptionStatus }}
            </VSnackbar>
    <v-row>
    <v-col cols="12" md="12" v-if="itemsPrescriptions">
      <v-card title="Prescriptions" v-if="prescription">
      <VCardText >
          <VRow>
            <VCol
              cols="12"
              offset-md="8"
              md="4"
            >
              <VTextField
                v-model="search"
                label="Search"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                hide-details
                dense
                outlined
              />
            </VCol>
          </VRow>
        </VCardText>
      <VDataTable
        :headers="headers"
        :items="itemsPrescriptions"
        :search="search"
        :items-per-page="5"
        class="text-no-wrap"
      >
            <!-- <template #item.id="{ item }">
            {{ item.id }}
            </template> -->
        <!-- full name -->
        <!-- status -->
        <template #item.status="{ item }">
          <VSelect
              v-model="item.status"
              placeholder="Status"
              density="comfortable"
              :items="['Pending', 'Shipped', 'Delivered', 'Transit', 'Recevied', 'Result']"
              @update:model-value="onStatusChange"
              @click="onChange(item.id)"
          />
         </template>

        <!-- <template #item.status="{ item }">
          <VChip
            :color="getStatusColor(item.status)"
            density="comfortable"
          >
            {{ getStatusColor(item.status) }}
          </VChip>
        </template> -->

        <!-- Actions -->
        <template #item.id="{ item }">
          <div class="gap-1 details cursor-pointer" @click=showDetail(item)> +
             
          </div>
        </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
}

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