<script setup>
import API from '@/api';
import { ADMIN_ORDER_GET_PERCRPTION_API } from '@/constants';
import AddPrescrption from '@/pages/prescrptions/AddPrescrption.vue';
import EditPrescrption from '@/pages/prescrptions/EditPrescrption.vue';
import { format } from 'date-fns';
import debounce from 'lodash.debounce';
import { useStore } from 'vuex';
const router = useRouter();
const isAddCustomerDrawerOpen = ref(false)
const isEditCustomerDrawerOpen = ref(false)
const store = useStore()
const editDialog = ref(false)
const addDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const refVForm = ref(null)
const refVFormAdd = ref(null)
const selectDropdown = ref(false)
const selectdataList = ref(null)
const defaultItem = ref({
    id: -1,
    title: '',
    slug: '',
    list_one_title: '',
    list_sub_title: '',
    list_two_title: '',
    price: '',
    currency: ""
})
const requiredImageValidator = (value) => !!value || 'Please select an image file.'
const requiredExcelValidator = (value) => !!value || 'Please select an Excel file.'
const imageFile = ref(null)
const excelFile = ref(null)
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const medicineList = ref([])
const isLoading = ref(false)
const currencySign = ref('$');
const imageBase64 = ref(null)
const excelBase64 = ref(null)
const currencies = ref([
    { code: 'USD', name: 'US Dollar', sign: '$' },
    { code: 'EUR', name: 'Euro', sign: '€' },
    { code: 'GBP', name: 'British Pound', sign: '£' },
    { code: 'JPY', name: 'Japanese Yen', sign: '¥' },
])
const setCurrency = (code, sign) => {
    currencySign.value = sign;
    // You can perform additional operations with the selected currency code if needed
};
// status options
const selectedOptions = [
    {
        text: 'Current',
        value: 1,
    },
    {
        text: 'Professional',
        value: 2,
    },
    {
        text: 'Rejected',
        value: 3,
    },
    {
        text: 'Resigned',
        value: 4,
    },
    {
        text: 'Applied',
        value: 5,
    },
]

// headers
const headers = [
    {
        title: 'ID',
        key: 'id',


    },
    {
        title: 'Name',
        key: 'name',
    },
    {
      title: 'Brand',
      key: 'brand',
    },
    {
        title: 'From',
        key: 'from',
     },
    {
        title: 'Quantity',
        key: 'quantity',
    },
    {
        title: 'Dosage',
        key: 'dosage',
    },
    {
        title: 'Refill Quantity',
        key: 'refill_quantity',
    },

    {
        title: 'ACTIONS',
        key: 'actions',
        searchable: false,
        orderable:false
    },
]

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 formatDateTime = (date) => {
    return format(date, 'MM-dd-yyyy HH:mm:ss');
};

const editItem = async (item) => {
    isEditCustomerDrawerOpen.value = true

    await store.dispatch('getPercrptionByID', {
        id: item.id,
    })

    editedItem.value = store.getters.getSinglePrescription
    console.log('here', store.getters.getSinglePrescription)
    // editDialog.value = true
}
const addItem = item => {
    addDialog.value = true
}
const deleteItem = item => {
    editedIndex.value = medicineList.value.indexOf(item)
    editedItem.value = { ...item }
    deleteDialog.value = true
}
const permissionRole = item => {
    router.push({ name: "admin-role-permission", params: { id: item.id } });

}

const selectfile = (data) => {
    if (data == 'dropdown') {
        selectDropdown.value = true
    } else {
        selectDropdown.value = false
    }

}
const close = () => {
    editDialog.value = false
    editedIndex.value = -1
    editedItem.value = { ...defaultItem.value }
}
const closeAdd = () => {
    addDialog.value = false
}
const closeDelete = () => {
    deleteDialog.value = false
    editedIndex.value = -1
    editedItem.value = { ...defaultItem.value }
}
// const getmedicineList = computed(async () => {
//   store.dispatch('updateIsLoading', true)
//   await store.dispatch('medicineList')
//   console.log('medicineList',store.getters.getMedcineList)
//   let list = store.getters.getMedcineList
//   await store.dispatch('questioneriesListExcel')
//   store.dispatch('updateIsLoading', false)
//   let getQuestioneriesList = store.getters.getQuestioneriesList
//     medicineList.value = list
//     return medicineList.value
// });
const convertImageToBase64 = (event) => {
    const file = event.target.files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        imageBase64.value = reader.result.split(',')[1]
    }
}

const convertExcelToBase64 = (event) => {
    const file = event.target.files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        excelBase64.value = reader.result.split(',')[1]
    }
}

const save = async () => {
    const { valid } = await refVFormAdd.value.validate()
    console.log(valid)
    if (valid) {
        try {

            if (editedIndex.value > -1) {
                Object.assign(medicineList.value[editedIndex.value], editedItem.value)



            } else {

                medicineList.value.push(editedItem.value)
                console.log(imageFile.value)
                //const formData = new FormData()
                //formData.append('image', imageBase64.value)


                // formData.append('title', defaultItem.value.title)
                // formData.append('slug', defaultItem.value.slug)
                // formData.append('list_one_title', defaultItem.value.list_one_title)
                // formData.append('list_sub_title', defaultItem.value.list_sub_title)
                // formData.append('list_two_title', defaultItem.value.list_two_title)
                // formData.append('price', defaultItem.value.price)
                // formData.append('currency', currencySign.value)
                let ecelData = ''
                if (selectDropdown.value) {
                    let datexcel = {
                        type: 'string',
                        data: selectdataList.value
                    }
                    console.log(datexcel)
                    ecelData = datexcel
                    //formData.append('excel', datexcel)
                } else {

                    let datexcel = {
                        type: 'file',
                        data: excelBase64.value
                    }
                    ecelData = datexcel
                    // formData.append('excel', datexcel)
                }
                await store.dispatch('medicineAdd', {
                    title: defaultItem.value.title,
                    slug: defaultItem.value.slug,
                    list_one_title: defaultItem.value.list_one_title,
                    list_sub_title: defaultItem.value.list_sub_title,
                    list_two_title: defaultItem.value.list_two_title,
                    price: defaultItem.value.price,
                    currency: currencySign.value,
                    excel: '',//ecelData,
                    image: imageBase64.value
                })

            }



            // Handle the API response
            console.log(response.data)
        } catch (error) {
            console.error(error)
        }
        addDialog.value = false
        await store.dispatch('medicineList')
        let list = store.getters.getMedcineList
        medicineList.value = list
        closeAdd()
    }
}
const update = async () => {
    const { valid } = await refVForm.value.validate()
    console.log(valid)
    if (valid) {
        try {

            if (editedIndex.value > -1) {
                Object.assign(medicineList.value[editedIndex.value], editedItem.value)

                console.log(imageFile.value)

                let ecelData = ''
                if (selectDropdown.value) {
                    let datexcel = {
                        type: 'string',
                        data: selectdataList.value
                    }
                    console.log(datexcel)
                    ecelData = datexcel
                    //formData.append('excel', datexcel)
                } else {

                    let datexcel = {
                        type: 'file',
                        data: excelBase64.value
                    }
                    ecelData = datexcel
                    // formData.append('excel', datexcel)
                }
                await store.dispatch('medicineUpdate', {
                    id: editedItem.value.id,
                    title: editedItem.value.title,
                    slug: editedItem.value.slug,
                    list_one_title: editedItem.value.list_one_title,
                    list_sub_title: editedItem.value.list_sub_title,
                    list_two_title: editedItem.value.list_two_title,
                    price: editedItem.value.price,
                    currency: currencySign.value,
                    excel: '',//ecelData,
                    image: imageBase64.value
                })

            }



            // Handle the API response
            console.log(response.data)
        } catch (error) {
            console.error(error)
        }
        addDialog.value = false
        await store.dispatch('medicineList')
        let list = store.getters.getMedcineList
        medicineList.value = list
        close()
    }
}
const deleteItemConfirm = async () => {

    await store.dispatch('deletePerscription', {
        id: editedItem.value.id
    })

    closeDelete()
    loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
    defaultItem.value.id = null
    defaultItem.value.name = null
    defaultItem.value.guard = null

}
const generateSlug = () => {
    console.log(editedItem.title)
    if (editedItem.value.title) {
        editedItem.value.slug = editedItem.value.title
            .toString()
            .trim()
            .toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w-]+/g, '')
            .replace(/--+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '')
    } else if (defaultItem.value.title) {
        defaultItem.value.slug = defaultItem.value.title
            .toString()
            .trim()
            .toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w-]+/g, '')
            .replace(/--+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '')
    } else {
        editedItem.slug = ''
    }
}
const serverItems = ref([]);
const loading = ref(true);
const totalItems = ref(0);

// Method to load items
const loadItems = debounce(async ({ page, itemsPerPage, sortBy }) => {
    const payload = {
        page,
        itemsPerPage,
        sortBy,
        filters: {

        },
        search: search.value,
    }
    console.log("records", page, itemsPerPage, sortBy);
    loading.value = true;
    const data = await API.getDataTableRecord(ADMIN_ORDER_GET_PERCRPTION_API, payload, headers);
    serverItems.value = data.items;
    totalItems.value = data.total;
    loading.value = false;
}, 500);
const itemsPerPage = ref(30);
onMounted(() => {

})
const handleParentAdded = async (msg) => {
    if (msg == 'success') {
        store.dispatch('updateIsLoading', true)
        loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
        store.dispatch('updateIsLoading', false)
    }
    // You can also trigger a toast or snackbar here to show the message
    // For example, if using Vuetify:
    // showSnackbar(msg)
}
</script>

<template>
    <v-row>
        <v-col cols="12" md="12">
            <VCard title="Prescriptions">

                <VCardText>
                    <VRow>

                         <VCol cols="12" md="8" class="d-flex align-center">
                             <VBtn prepend-icon="ri-add-line" @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen" v-if="$can('read', 'Prescription Add')">
                              Add Prescription
                            </VBtn>
                            </VCol>
                                         
           
                        <VCol cols="12" md="4" class="d-flex justify-end">
                            <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="medicineList"
        :search="search"
        :items-per-page="5"
        class="text-no-wrap"
      > -->
                <v-data-table-server v-model:items-per-page="itemsPerPage" :headers="headers" :items="serverItems"
                    :items-length="totalItems" :loading="loading" :search="search" :item-value="name"
                    @update:options="loadItems">
                    <!-- full name -->
                    <template #item.title="{ item }">
                        <div class="d-flex align-center">
                            <!-- avatar -->
                            <VAvatar size="32" :color="item.image_url ? '' : 'primary'"
                                :class="item.image_url ? '' : 'v-avatar-light-bg primary--text'"
                                :variant="!item.image_url ? 'tonal' : undefined">
                                <VImg v-if="item.image_url" :src="item.image_url" />
                                <span v-else class="text-sm">{{ avatarText(item.name) }}</span>
                            </VAvatar>

                            <div class="d-flex flex-column ms-3">
                                <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.title
                                    }}</span>

                            </div>
                        </div>
                    </template>

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

                    <template #item.brand="{ item }">
                            <span v-html="item.brand"></span>
                    </template>
                    <template #item.created_at="{ item }">
                        <span>{{ formatDateTime(item.created_at) }}</span>
                    </template>

                    <template #item.updated_at="{ item }">
                        <span>{{ formatDateTime(item.updated_at) }}</span>
                    </template>

                    <!-- Actions -->
                    <template #item.actions="{ item }">
                        <div class="d-flex gap-1">
                            <IconBtn size="small" @click="editItem(item)" v-if="$can('read', 'Prescription Edit')">
                                <VIcon icon="ri-pencil-line" />
                            </IconBtn>
                            <IconBtn size="small" @click="deleteItem(item)" v-if="$can('read', 'Prescription Delete')">
                                <VIcon icon="ri-delete-bin-line" />
                            </IconBtn>
                        </div> 
                     
                    </template>
                </v-data-table-server>
                <!-- </VDataTable> -->
            </VCard>
        </v-col>

        <AddPrescrption v-model:is-drawer-open="isAddCustomerDrawerOpen" @addedMessage="handleParentAdded" />
        <EditPrescrption v-model:is-drawer-open="isEditCustomerDrawerOpen" :user-data="store.getters.getSinglePrescription"
            @addedMessage="handleParentAdded" />
    </v-row>
    <!-- 👉 Edit Dialog  -->
    <VDialog v-model="editDialog" max-width="600px">
        <VForm ref="refVForm">
            <VCard>
                <VCardTitle>
                    <span class="headline">Edit Role</span>
                </VCardTitle>

                <VCardText>
                    <VContainer>

                        <VRow>
                            <!-- fullName -->
                            <VCol cols="12" md="12">
                                <VTextField v-model="editedItem.name" label="Name" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" md="12">
                                <VTextField v-model="editedItem.guard" label="Guard" :rules="[requiredValidator]" />
                            </VCol>

                        </VRow>
                    </VContainer>
                </VCardText>

                <VCardActions>
                    <VSpacer />

                    <VBtn color="error" variant="outlined" @click="close">
                        Cancel
                    </VBtn>

                    <VBtn color="success" variant="elevated" @click="update">
                        Save
                    </VBtn>

                </VCardActions>
            </VCard>
        </VForm>
    </VDialog>

    <!-- 👉 Delete Dialog  -->
    <VDialog v-model="deleteDialog" max-width="500px">
        <VCard>
            <VCardTitle>
                Are you sure you want to delete this item?
            </VCardTitle>

            <VCardActions>
                <VSpacer />

                <VBtn color="error" variant="outlined" @click="closeDelete">
                    Cancel
                </VBtn>

                <VBtn color="success" variant="elevated" @click="deleteItemConfirm">
                    OK
                </VBtn>

                <VSpacer />
            </VCardActions>
        </VCard>
    </VDialog>


    <!-- 👉 Add Dialog  -->
    <VDialog v-model="addDialog" max-width="600px">
        <VForm ref="refVFormAdd">
            <VCard>
                <VCardTitle>
                    <span class="headline">Add Role</span>
                </VCardTitle>

                <VCardText>
                    <VContainer>

                        <VRow>
                            <!-- fullName -->
                            <VCol cols="12" md="12">
                                <VTextField v-model="defaultItem.name" label="Name" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" md="12">
                                <VTextField v-model="defaultItem.guard" label="Guard" :rules="[requiredValidator]" />
                            </VCol>

                        </VRow>
                    </VContainer>
                </VCardText>

                <VCardActions>
                    <VSpacer />

                    <VBtn color="error" variant="outlined" @click="closeAdd">
                        Cancel
                    </VBtn>

                    <VBtn color="success" variant="elevated" @click="save">
                        Save
                    </VBtn>

                </VCardActions>
            </VCard>
        </VForm>
    </VDialog>
</template>
<style scoped>
.custom-button {
    width: 100%;
    height: 48px;
    /* This value should match the height of your input fields */
}
</style>
